<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/touchTouch.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/touchtouch.jquery.js" type="text/javascript"></script>
    <script src="js/jquery.toTop.js" type="text/javascript"></script> 
    <script src="js/bootstrap.js"></script>

    <style>
        .nav-top{
            background: #334960;
            height:100px;
            transition: all 0.5s ease;
            border-bottom: 2px solid black;
        }
        .ul1{
            list-style: none;
        }
        .ul1 li{
            float:left;
            padding:38px 15px 3px 15px;
            position: relative;
        }
        .ul1 li a{
            font-size: 150%;
            text-decoration: none;
            color:white;

        }
        .ul1-div{
            width:100%;
            height:70px;
            background: #3f9fc9;
            position: absolute;
            left:0;
            top:10px;
            z-index: -1;
        }
        .div1{
            width: 100%;
            height: 870px;
        }
        .div11{
            width: 1170px;
            height: 500px;

            padding: 0;
            position: relative;
            top: 185px;
        }
        .div111{
            height:0;
            width:0;
            border-width:37px 50px 50px 50px;
            border-style:solid;
            margin: 0 auto;
            position: relative;
            top: 370px;
        }
        .div11 h1{
            color: white;
            margin-left: 30px;
        }
        .bottom{
            width:100%;
            height:100px;
            background-color: #334960;
        }
        .totop img{
            border-radius: 25px;
        }
        /*手风琴*/
        #imgbox{
            list-style: none;
            display: inline-flex;
            width:1170px;
            height:400px;
            padding: 0;
            overflow: hidden;
            margin-top: 100px;
        }
        #imgbox img{
            width: 754px;
            height: 400px;
        }
        .img{
            width:234px;
            height:400px;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /*遮罩层*/
        .imgslider {
            margin-left: 20px;
            padding:0;
        }
        .imgslider a{
            width:270px;
            height:192px;
            margin: 10px;
            padding:0;
            display: inline-flex;
            border-radius: 5px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            overflow: hidden;
        }
        /* imgHover */
        .imageMask{
            background-color: rgba(255, 255, 255, 0.8);
            filter:alpha(opacity=0);
            cursor: pointer;
            position: absolute;
        }
        .imageMask span{
            filter:alpha(opacity=0);
            opacity: 0;
            cursor: pointer;
        }
        .imageOver{
            background-color: rgba(255, 255, 255, 0.8);
            opacity: 1;
            top:0;
        }
        .imageOver span{
            background:url(images/zoom.gif) no-repeat 50% 50%;
            filter:alpha(opacity=60);
            opacity: 0.6;
        }
        .div-img1{
            position: relative;
            left: 160px;
            width: 1000px;
            height: 360px;
        }
        .div-img1 img{
            width: 800px;
            height: 350px;
        }
        .div-img2{
            width: 1170px;
            height: 140px;
        }
        .div-img2 img{
            width: 200px;
            height: 130px;
            margin-left: 17px;
            border: 1px solid black;
        }
        #canvas{
            margin-left: 120px;
        }
        .div-p{
            height: 500px;
            overflow: hidden;
        }
        .div-p h1{
            margin-bottom: 50px;
        }
        .div-p p{
            font-size: 18px;
            margin-left: 30px;
            position: relative;
            text-indent:2em;

        }
        .bottom p{
            color: white;
            text-align: center;
            line-height: 100px;
        }
        .logo{
            line-height: 100px;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-fixed-top nav-top">
    <div class="container">
        <a href="" class="logo"><img src="images/logo.png" alt=""/></a>
        <ul class="navbar-right ul1">
            <li>
                <a href="#a">手风琴</a>
                <div class="ul1-div li1"></div>
            </li>
            <li>
                <a href="#b">遮罩放大层</a>
                <div class="ul1-div li2" style="height:10px;top:0;"></div>
            </li>
            <li>
                <a href="#c">canvas钟表</a>
                <div class="ul1-div li3" style="height:10px;top:0;"></div>
            </li>
            <li>
                <a href="#d">相册轮播效果</a>
                <div class="ul1-div li4" style="height:10px;top:0;"></div>
            </li>
        </ul>
    </div>
</nav>
<div class="div1" id="a"  style=" background-color: #334960;">
    <div class="container div11">

        <ul id="imgbox">
            <li id="img1" class="img"><img src="images/slide-1.jpg" alt=""/></li>
            <li id="img2" class="img"><img src="images/slide-2.jpg" alt=""/></li>
            <li id="img3" class="img"><img src="images/slide-3.jpg" alt=""/></li>
            <li id="img4" class="img"><img src="images/slide-4.jpg" alt=""/></li>
            <li id="img5" class="img"><img src="images/slide-5.jpg" alt=""/></li>
        </ul>
    </div>
    <div class="div111" style="border-color: #334960 transparent transparent transparent;">
    </div>
</div>
<div class="div1" id="b" style=" background-color: #f17c72;">
    <div class="container div11">
        <h1>遮罩层放大图</h1>
        <div class="imgslider col-md-12">
            <a href="images/large1.jpg" style="background-image:url(images/large1.jpg)" class="col-md-3 col-lg-3"></a>
            <a href="images/large2.jpg" style="background-image:url(images/large2.jpg)" class="col-md-3 col-lg-3"></a>
            <a href="images/large3.jpg" style="background-image:url(images/large3.jpg)" class="col-md-3 col-lg-3"></a>
            <a href="images/large4.jpg" style="background-image:url(images/large4.jpg)" class="col-md-3 col-lg-3"></a>
            <a href="images/large5.jpg" style="background-image:url(images/large5.jpg)" class="col-md-3 col-lg-3"></a>
            <a href="images/large6.jpg" style="background-image:url(images/large6.jpg)" class="col-md-3 col-lg-3"></a>
            <a href="images/large7.jpg" style="background-image:url(images/large7.jpg)" class="col-md-3 col-lg-3"></a>
            <a href="images/large8.jpg" style="background-image:url(images/large8.jpg)" class="col-md-3 col-lg-3"></a>
        </div>
    </div>
    <div class="div111" style="border-color: #f17c72 transparent transparent transparent;">

    </div>
</div>
<div class="div1" id="c" style=" background-color: #32ac79;">
    <div class="container div11">
        <div class="row">
            <div class="col-lg-6 col-md-6 div-p">
                <h1>canvas画布</h1>
                <p>canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。</p>
                <p>在矩形区域的画布上，JavaScript 绘制 2D图形，逐像素进行渲染，可以通过多种方法使用canvas元素绘制路径、矩形、圆形、字符以及添加图像。</p>
                <p>canvas 元素本身是没有绘图能力的。所有的绘制工作必须使用Javascript canvas绘图API完成。</p>
                <p>canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。</p>
                <p>Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。</p>
            </div>
            <div class="col-lg-6 col-md-6">
                <h1>钟表</h1>
                <canvas id="canvas" width="410" height="410"></canvas>
            </div>
        </div>

    </div>
    <div class="div111" style="border-color: #32ac79 transparent transparent transparent;">

    </div>
</div>
<div class="div1" id="d" style=" background-color: #7f4c76;">
    <div class="container div11">
        <div class="row">
            <div class="col-md-12 col-lg-12 div-img1" id="row-div">
                <img src="images/1.jpg" alt=""/>
            </div>
            <div class="col-md-12 col-lg-12 div-img2">
                <img src="images/1.jpg" alt="" class="img" id="pig1"/>
                <img src="images/2.jpg" alt="" class="img" id="pig2"/>
                <img src="images/3.jpg" alt="" class="img" id="pig3"/>
                <img src="images/4.jpg" alt="" class="img" id="pig4"/>
                <img src="images/5.jpg" alt="" class="img" id="pig5"/>
            </div>
        </div>
    </div>
</div>
<div class="bottom">
    <p>本页面完成于2018-1-18，内容为《计算机软件工程》期末考试页面。</p>
</div>
<div class="totop">
    <img src="images/totop.png" alt=""/>
</div>
<script src="js/xiangce.js" type="text/javascript"></script>
<script src="js/shoufengqin.js" type="text/javascript"></script>
<script src="js/clock.js" type="text/javascript"></script>
<script src="js/imgHover.js" type="text/javascript"></script>
<script src="js/clickscroll.js" type="text/javascript"></script>
<script>
    $(function(){
        $(".totop").toTop();
        $(".imgslider a").touchTouch();
    })
</script>
</body>
</html>